<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" background-color="#304156"
        text-color="#bfcbd9" active-text-color="#20a0ff" router>
            <template v-for="item2 in state.items" :key="item2.index">
              <el-sub-menu :index="item2.index">
                    <template #title>
                      <el-icon>
                        <Menu/>
                      </el-icon>
                        <span>{{ item2.title }}</span>
                    </template>

              <template v-for="subItem in item2.subs" :key="subItem.index">
                <el-menu-item :index="subItem.index">
                    <template #title>
                      <el-icon>
                        <Edit/>
                      </el-icon>
                        <span>{{ subItem.title }}</span>
                    </template>
                </el-menu-item>
            </template>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<script setup>
  import {
    Edit,Menu,
  } from '@element-plus/icons-vue'
    const state = {
        items: [
        {
            index: "1",
            title: "管理模块",
            subs: [
                {
                    index: "typemanage",
                    title: "类型管理"
                },
                {
                    index: "goodsmanage",
                    title: "商品管理"
                },
                {
                    index: "ordermanage",
                    title: "订单管理"
                }
            ],
        },
        {
            index: "2",
            title: "统计模块",
            subs: [
                {
                    index: "salesstatistics",
                    title: "销量统计(按月)"
                },
                {
                    index: "orderstatistics",
                    title: "订单统计(按类型)"
                },
                {
                    index: "mytest",
                    title: "我的测试"
                }
            ],
        }
    ]
    }
</script>


<style scoped>
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
        background: #304156;
        width: 250px;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 250px;
    }

    .sidebar>ul {
        height: 100%;
        text-align: left;
    }

    .el-menu-item [class^="el-icon-"] {
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
    }
</style>
